<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <script src="./lib/vue.js"></script>
    <!-- <script src="./lib/vue.min.js"></script> -->
    <link rel="stylesheet"
        href="./lib/vant@2.12.54_lib_index.css">
    <link rel="stylesheet"
        href="./styles/vant.css" />
    <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
    <script src="./lib/axios-0.18.0.js"></script>
    <script src="./http/http.js"></script>
    <script src="./areaList/orderAreaList.js"></script>
    <script src="./utils/fileCompress.js"></script>
    <title>代跑跑</title>
    <style>
        .main {
            overflow: scroll;
            height: calc(100vh - 46px);
        }

        .van-tabbar-item__icon {
            font-size: 30px;
        }

        .popup-main {
            margin: 0 16px;
        }

        .orderDetails {
            overflow-y: scroll;
        }

        .orderItem {
            margin: 16px 0;
            position: relative;
            width: 100%;
            height: 25%;
            border-radius: 8px;
            background-color: #fff;
        }

        .van-cell-group {
            background-color: var(--van-doc-background);
        }

        .order-tag {
            display: flex;
            padding: 8px 10px;
            justify-content: space-between;
        }

        .tag-left {
            display: flex;
            align-items: center;
        }

        .tag-right {
            display: flex;
            align-items: center;
            color: var(--van-warnning);
        }


        .van-divider {
            margin: 0 15px;
            border-color: #cccccc91;
        }

        .order-info {
            display: flex;
            width: 100%;
            padding: 12px 12px;
            font-size: 16px;
        }

        .toOrderDetails {
            width: 100%;
            font-size: 12px;
            color: #6e6e6e;
            margin: 0 auto;
            text-align: center;
        }

        .order-info .left {
            font-size: 14px;
        }

        .order-info .right {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .order-info .right .van-button--small {
            font-size: 16px;
            width: 120px;
        }

        .waiting.outOrderBtn {
            color: var(--van-primary);
            border: 1px solid var(--van-primary);
        }

        .doing.outOrderBtn {
            color: var(--van-warnning);
            border: 1px solid var(--van-warnning);
        }

        .taken.outOrderBtn {
            color: #fff;
            background-color: var(--van-success);
            border: 1px solid var(--van-success);
        }

        .done.outOrderBtn {
            color: var(--van-done);
            border: 1px solid var(--van-done);
        }

        .cannel {
            color: #fff;
            background-color: var(--van-danger);
            border: 1px solid var(--van-danger);
        }

        .cannel.cannelBtn {
            color: var(--van-danger);
            background-color: #fff;
            border: 1px solid var(--van-danger);
        }

        .waiting.takeOrderBtn {
            color: #fff;
            background-color: var(--van-primary);
            border: 1px solid var(--van-primary);
        }

        .waiting.takeOrderOutBtn {
            color: var(--van-primary);
            background-color: #fff;
            border: 1px solid var(--van-primary);
        }

        .doing.takeOrderBtn {
            color: #fff;
            background-color: var(--van-warnning);
            border: 1px solid var(--van-warnning);
        }

        .taken.takeOrderBtn {
            color: var(--van-success);
            border: 1px solid var(--van-success);
        }

        .done.takeOrderBtn {
            color: var(--van-done);
            border: 1px solid var(--van-done);
        }

        .images-preview .van-cell__value {
            display: flex;
            flex-wrap: nowrap;
            flex-direction: column;
            align-items: center;
        }

        .images-preview .imgItem {
            margin: 5px 0;
            width: 90%;
        }

        .img-cover-box {
            display: flex;
            justify-content: center;
        }

        .img-cover-box .imgItem {
            margin: 5px 0;
            width: 90%;
        }

        .detail-btn-box {
            margin: 10px 0;
            display: flex;
            justify-content: center;
        }

        .detail-btn-box .detailBtn {
            display: inline-block;
            width: 80%;
            height: 40px;
            font-size: 14px;
        }

        .color-mark .van-cell__value {
            color: red;
        }

        .style-center {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .order-category .van-radio {
            margin: 2px 3px;
        }

        .codes-box {
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .van-dialog__confirm,
        .van-dialog__confirm:active {
            color: #2ed0df;
        }

        .van-divider{
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 标题栏 -->
        <van-nav-bar title="订单"></van-nav-bar>
        <div class="main">
            <!-- 下拉刷新 -->
            <van-pull-refresh v-model="isLoading"
                @refresh="onRefresh">
                <van-cell-group inset>

                    <van-cell :value="path"
                        title="地址查询"
                        style="height: 40px; border-radius: 8px; margin-top: 10px;"
                        is-link
                        @click="isShowAreaList = true">
                    </van-cell>

                    <van-cell style="border-radius: 8px; margin-top: 10px;">
                        <van-radio-group class="order-category"
                            v-model="takenOrderListCategory"
                            direction="horizontal">
                            <van-radio name="所有">
                                <span>所有|{{total}}</span>
                            </van-radio>
                            <van-radio name="已取件"
                                v-if="!type">
                                <span>已取件|{{take}}</span>
                            </van-radio>
                            <van-radio name="未取件"
                                v-if="!type">
                                <span>未取件|{{notTake}}</span>
                            </van-radio>
                            <van-radio name="待送达"
                                v-if="type">
                                <span v-if="delivery"
                                    style="color: red;">待送达|{{delivery}}</span>
                                <span v-else>待送达|{{delivery}}</span>
                            </van-radio>
                            <van-radio name="已送达"
                                v-if="type">
                                <span v-if="deliveried"
                                    style="color: red;">已送达|{{deliveried}}</span>
                                <span v-else>已送达|{{deliveried}}</span>
                            </van-radio>
                            <van-radio name="1-7"
                                v-if="!type">
                                <span>1-7|<span style="color: red;">{{category.yd8.available}}</span>|<span style="color: yellowgreen;">{{category.yd8.collected}}</span>|<span style="color: blue;">{{category.yd8.total}}</span></span>
                            </van-radio>
                            <van-radio name="13-41"
                                v-if="!type">
                                <span>13-41|<span style="color: red;">{{category.s3d41.available}}</span>|<span style="color: yellowgreen;">{{category.s3d41.collected}}</span>|<span style="color: blue;">{{category.s3d41.total}}</span></span>
                            </van-radio>
                            <van-radio name="12-38"
                                v-if="!type">
                                <span>12-38|<span style="color: red;">{{category.s2d38.available}}</span>|<span style="color: yellowgreen;">{{category.s2d38.collected}}</span>|<span style="color: blue;">{{category.s2d38.total}}</span></span>
                            </van-radio>
                            <van-radio name="快递柜"
                                v-if="!type">
                                <span>快递柜|<span style="color: red;">{{category.cabinet.available}}</span>|<span style="color: yellowgreen;">{{category.cabinet.collected}}</span>|<span style="color: blue;">{{category.cabinet.total}}</span></span>
                            </van-radio>
                            <van-radio name="其它"
                                v-if="!type">
                                <span>其它|<span style="color: red;">{{category.other.available}}</span>|<span style="color: yellowgreen;">{{category.other.collected}}</span>|<span style="color: blue;">{{category.other.total}}</span></span>
                            </van-radio>
                            <van-radio name="所有单"
                                v-if="!type">
                                <span>所有单|{{all}}</span>
                            </van-radio>
                            <van-radio name="疑难单"
                                v-if="!type">
                                <span v-if="difficult"
                                    style="color: red;">疑难单|{{difficult}}</span>
                                <span v-else>疑难单|{{difficult}}</span>
                            </van-radio>
                            <van-radio name="问题单"
                                v-if="!type">
                                <span v-if="error"
                                    style="color: red;">问题单|{{error}}</span>
                                <span v-else>问题单|{{error}}</span>
                            </van-radio>
                        </van-radio-group>
                    </van-cell>

                    <van-cell style="border-radius: 8px; margin-top: 10px;">
                        <div style="display: flex;  justify-content: space-between;">
                            <div style="display: flex; align-items: center;">
                                <span>显示宿舍楼件数</span>
                                <van-switch v-model="isShowFloorCategory"
                                    size="24px"></van-switch>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <span>显示中午订单</span>
                                <van-switch v-model="isHide"
                                    size="24px"></van-switch>
                            </div>
                        </div>
                    </van-cell>

                    <van-cell v-if="isShowFloorCategory"
                        style=" border-radius: 8px; margin-top: 10px;">
                        <div v-if="!type&&!buildsType">
                            <div>
                                <span>静1</span>&nbsp;
                                <span v-for="(item,index) in detail[0]['静园1']"
                                    :key="index" v-if="!((index === '楼下'&&(!item.totals))||index === '六层')">
                                    {{index === '楼下' ? '楼下' : index.slice(0, -1)}}:
                                    <span style="color: red;">{{item.counts}}/</span><span style="color: red;">{{item.totals}}</span>
                                </span>
                            </div>
                            <div>
                                <span>静2</span>&nbsp;&nbsp;
                                <span>
                                    <span>
                                        1-3:
                                        <span style="color: red;">
                                            {{detail[1]['静园2']['楼下'].counts + detail[1]['静园2']['一层'].counts + detail[1]['静园2']['二层'].counts + detail[1]['静园2']['三层'].counts}}/{{detail[1]['静园2']['楼下'].totals + detail[1]['静园2']['一层'].totals + detail[1]['静园2']['二层'].totals + detail[1]['静园2']['三层'].totals}}
                                        </span>
                                    </span>
                                    &nbsp;&nbsp;
                                    <span>
                                        4-5:
                                        <span style="color: red;">
                                            {{detail[1]['静园2']['四层'].counts + detail[1]['静园2']['五层'].counts}}/{{detail[1]['静园2']['四层'].totals + detail[1]['静园2']['五层'].totals}}
                                        </span>
                                    </span>
                                </span>
                            </div>
                            <div>
                                <span style="color: blue;">{{ this.builds[2].counts+this.builds[7].counts+this.builds[8].counts+this.builds[23].counts+this.builds[24].counts+this.builds[25].counts+this.builds[26].counts+this.builds[27].counts }}</span>/{{ this.builds[2].totals+this.builds[7].totals+this.builds[8].totals+this.builds[23].totals+this.builds[24].totals+this.builds[25].totals+this.builds[26].totals+this.builds[27].totals }}:
                                &nbsp;&nbsp;
                                {{ this.builds[2].build }}:<span style="color: blue;">{{ this.builds[2].counts }}</span>/{{ this.builds[2].totals }}
                                {{ this.builds[7].build.slice(0,1) }}:<span style="color: blue;">{{ this.builds[7].counts+this.builds[8].counts }}</span>/{{this.builds[7].totals+this.builds[8].totals }}
                                {{ this.builds[23].build.slice(0,2) }}:<span style="color: blue;">{{ this.builds[23].counts+this.builds[24].counts }}</span>/{{this.builds[23].totals+this.builds[24].totals }}
                                {{ this.builds[25].build.slice(0,2) }}:<span style="color: blue;">{{ this.builds[25].counts+this.builds[26].counts }}</span>/{{this.builds[25].totals+this.builds[26].totals }}
                                {{ this.builds[27].build.slice(0,2) }}:<span style="color: blue;">{{ this.builds[27].counts }}</span>/{{this.builds[27].totals }}
                            </div>
                            <van-divider :style="{ color: '#2ED0DF', borderColor: '#2ED0DF' }"></van-divider>
                            <div>
                                <span style="color: red;">{{ this.builds[11].counts+this.builds[12].counts+this.builds[13].counts+this.builds[14].counts }}</span>/{{this.builds[11].totals+this.builds[12].totals+this.builds[13].totals+this.builds[14].totals}}:
                                &nbsp;&nbsp;
                                {{ this.builds[11].build }}:<span style="color: red;">{{ this.builds[11].counts }}</span>/{{ this.builds[11].totals }}
                                {{ this.builds[12].build }}:<span style="color: red;">{{ this.builds[12].counts }}</span>/{{ this.builds[12].totals }}
                                {{ this.builds[13].build }}:<span style="color: red;">{{ this.builds[13].counts }}</span>/{{ this.builds[13].totals }}
                                {{ this.builds[14].build }}:<span style="color: red;">{{ this.builds[14].counts }}</span>/{{ this.builds[14].totals }}
                            </div>
                            <div>
                                <span style="color: red;">{{ this.builds[15].counts+this.builds[16].counts+this.builds[17].counts+this.builds[18].counts }}</span>/{{this.builds[15].totals+this.builds[16].totals+this.builds[17].totals+this.builds[18].totals}}:
                                &nbsp;&nbsp;
                                {{ this.builds[15].build }}:<span style="color: red;">{{ this.builds[15].counts }}</span>/{{ this.builds[15].totals }}
                                {{ this.builds[16].build }}:<span style="color: red;">{{ this.builds[16].counts }}</span>/{{ this.builds[16].totals }}
                                {{ this.builds[17].build }}:<span style="color: red;">{{ this.builds[17].counts }}</span>/{{ this.builds[17].totals }}
                                {{ this.builds[18].build }}:<span style="color: red;">{{ this.builds[18].counts }}</span>/{{ this.builds[18].totals }}
                            </div>
                            <div>
                                <span style="color: red;">{{ this.builds[19].counts+this.builds[20].counts+this.builds[21].counts+this.builds[22].counts }}</span>/{{this.builds[19].totals+this.builds[20].totals+this.builds[21].totals+this.builds[22].totals}}:
                                &nbsp;&nbsp;
                                {{ this.builds[19].build }}:<span style="color: red;">{{ this.builds[19].counts }}</span>/{{ this.builds[19].totals }}
                                {{ this.builds[20].build }}:<span style="color: red;">{{ this.builds[20].counts }}</span>/{{ this.builds[20].totals }}
                                {{ this.builds[21].build }}:<span style="color: red;">{{ this.builds[21].counts }}</span>/{{ this.builds[21].totals }}
                                {{ this.builds[22].build }}:<span style="color: red;">{{ this.builds[22].counts }}</span>/{{ this.builds[22].totals }}
                            </div>
                            <div>
                                <span style="color: red;">{{ this.builds[3].counts+this.builds[4].counts+this.builds[5].counts+this.builds[6].counts }}</span>/{{this.builds[3].totals+this.builds[4].totals+this.builds[5].totals+this.builds[6].totals}}:
                                &nbsp;&nbsp;
                                {{ this.builds[3].build }}:<span style="color: red;">{{ this.builds[3].counts }}</span>/{{ this.builds[3].totals }}
                                {{ this.builds[4].build }}:<span style="color: red;">{{ this.builds[4].counts }}</span>/{{ this.builds[4].totals }}
                                {{ this.builds[5].build }}:<span style="color: red;">{{ this.builds[5].counts }}</span>/{{ this.builds[5].totals }}
                                {{ this.builds[6].build }}:<span style="color: red;">{{ this.builds[6].counts }}</span>/{{ this.builds[6].totals }}
                            </div>
                        </div>
                        <div v-if="buildsType||!!type" style="display: flex; flex-wrap: wrap;">
                            <div v-for="item in builds"
                                :key="item.build"
                                v-if="item.totals"
                                style="width: 25%;">
                                <span>{{ item.build }}:</span>
                                <span v-if="type === 0"
                                    style="color: red;">{{item.counts}}/</span>
                                <span style="color: red;">{{item.totals}}</span>
                            </div>
                        </div>
                    </van-cell>

                    <van-cell v-if="path !== '所有'"
                        style=" border-radius: 8px; margin-top: 10px;">
                        <div v-if="type === 0"
                            style="display: flex; align-items: center;">
                            <div>当前已取件数</div>
                            <div style="display: flex; flex-wrap: wrap; flex: 1; justify-content: end;">
                                <div style="margin: 5px;"
                                    v-for="(val,key) of floorEffectives"
                                    :key="key">
                                    <span>{{key}}:<span style="color: red;">{{val}}</span></span>
                                </div>
                            </div>
                        </div>
                        <van-divider :style="{color:'#999'}"></van-divider>
                        <div style="display: flex; align-items: center;">
                            <div v-if="type === 0">当前需要取件数</div>
                            <div v-else>当前需要送达件数</div>
                            <div style="display: flex; flex-wrap: wrap; flex: 1; justify-content: end;">
                                <div style="margin: 5px;"
                                    v-for="(val,key) of floorTotals"
                                    :key="key">
                                    <span>{{key}}:<span style="color: red;">{{val}}</span></span>
                                </div>
                            </div>
                        </div>
                    </van-cell>
                        <div v-if="showTakeOrderList.length > 0"
                            class="orderItem"
                            v-for="(item,index) in showTakeOrderList"
                            :key="item.id"
                            @click="showTakenOrderDetails(item)">
                            <div class="order-tag">
                                <div class="tag-left">
                                    <span>&nbsp;<van-tag color="#ff976a"
                                            plain>{{item.orderType}}</van-tag></span>
                                    <span v-if="item.orderStatus === -2">&nbsp;<van-tag color="#ee0a24"
                                            plain>疑难件</van-tag></span>
                                </div>
                                <div class="tag-right">
                                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                                </div>
                            </div>
                            <van-divider></van-divider>
                            <div class="order-info">
                                <div class="left">
                                    <div class="left-item">
                                        <span class="phone-tag">联系方式: </span>
                                        <span class="user-phone">{{item.phone}} </span>
                                    </div>
                                    <div class="left-item">
                                        <span class="adderss-tag">送达地址: </span>
                                        <span class="address">{{item.address}}</span>
                                    </div>
                                    <!-- <div class="left-item">
                                    <span class="update-time-tag">发布时间: </span>
                                    <span>{{item.createTime}}</span>
                                </div> -->
                                </div>
                                <div class="right"
                                    @click.stop
                                    v-if="item.orderType=== '代取快递'||item.orderType=== '加急快递'">
                                    <van-button round
                                        :disabled="!!type"
                                        class="cannel cannelBtn takeOrderBtn"
                                        v-if="item.orderStatus === -3"
                                        size="small">问题件</van-button>
                                    <van-button round
                                        :disabled="!!type"
                                        class="cannel cannelBtn takeOrderBtn"
                                        v-if="item.orderStatus === -2"
                                        size="small">疑难件</van-button>
                                    <van-button round
                                        :disabled="!!type"
                                        class="waiting  takeOrderOutBtn"
                                        v-if="takeStatusArr.includes(item.orderStatus)"
                                        size="small">待取件</van-button>
                                    <van-button round
                                        :disabled="!type"
                                        class="doing  takeOrderBtn"
                                        @click="finishPackage(item)"
                                        v-else-if="item.orderStatus === 3||item.orderStatus === 6"
                                        size="small">已送达</van-button>
                                    <van-button round
                                        disabled
                                        class="taken takeOrderBtn"
                                        v-else-if="item.orderStatus === 4"
                                        size="small">等待确认</van-button>
                                    <van-button round
                                        disabled
                                        class="done takeOrderBtn"
                                        v-else-if="item.orderStatus === 5"
                                        size="small">已完成</van-button>
                                </div>
                                <div class="right"
                                    @click.stop
                                    v-if="item.orderType=== '代跑腿'">
                                    <van-button round
                                        class="waiting  takeOrderBtn"
                                        @click="takePackage(item)"
                                        v-if="item.orderStatus === 2"
                                        size="small">开始任务</van-button>
                                    <van-button round
                                        class="doing  takeOrderBtn"
                                        @click="finishPackage(item)"
                                        v-else-if="item.orderStatus === 3"
                                        size="small">完成任务</van-button>
                                    <van-button round
                                        disabled
                                        class="taken takeOrderBtn"
                                        v-else-if="item.orderStatus === 4"
                                        size="small">等待确认</van-button>
                                    <van-button round
                                        disabled
                                        class="done takeOrderBtn"
                                        v-else-if="item.orderStatus === 5"
                                        size="small">已完成</van-button>
                                </div>
                            </div>
                            <van-divider></van-divider>
                            <div>
                                <div class="toOrderDetails">点击查看详情</div>
                            </div>
                            <van-divider v-if="item.orderStatus === 4"></van-divider>
                            <div v-if="item.orderStatus === 4">
                                <div class="toOrderDetails">订单送达后一小时自动确认</div>
                            </div>
                        </div>

                </van-cell-group>

            </van-pull-refresh>

            <van-popup v-model="isShowAreaList"
                round
                position="bottom">
                <van-picker title="请选择配送地址"
                    show-toolbar
                    :columns="areaList"
                    @confirm="getAddress"
                    @cancel="isShowAreaList = false"></van-picker>
            </van-popup>

            <!-- 已接订单详情弹出层 -->
            <van-popup v-model="isShowTakenOrderDetails"
                closeable
                round
                position="bottom"
                :style="{ height: '80%' }">

                <van-cell-group class="orderDetails"
                    title="订单详细信息"
                    inset></van-cell-group>

                <!-- 代取快递 -->
                <div class="popup-main"
                    v-if="orderItem&&(orderItem.orderType === '代取快递'||orderItem.orderType === '加急快递')">
                    <van-cell title="订单类型"
                        readonly
                        value="代取快递"></van-cell>
                    <van-cell title="取件地址"
                        value="菜鸟驿站"></van-cell>
                    <!-- <van-cell title="期望送达时间"
                        readonly
                        :value="orderItem.expectTime"></van-cell> -->
                    <van-cell title="取件信息"
                        :border="false"
                        readonly>
                        <template #default>
                            <div>{{ orderItem.packageInfo }}</div>
                        </template>
                    </van-cell>
                    <van-cell class="images-preview">
                        <img class="imgItem"
                            v-for="(item) in orderItem.images"
                            :key="item"
                            :src="item">
                    </van-cell>
                    <van-cell
                        v-if="orderItem.orderStatus === -2||orderItem.orderStatus === -3||orderItem.orderStatus === 3||orderItem.orderStatus === 6"
                        title="总快递件数"
                        class="color-mark"
                        readonly
                        :value="orderItem.count"></van-cell>
                    <van-cell v-if="orderItem.orderStatus === 6&&!!type"
                        title="需要送达快递件数"
                        class="color-mark"
                        readonly
                        :value="orderItem.effectiveCount"></van-cell>
                    <div class="codes-box"
                        v-if="orderItem.orderCounts&&!type"
                        v-for="item in orderItem.orderCounts">
                        <div>
                            {{ item.takeCode }}&nbsp;
                            <span style="color: red;">{{item.serverRemark}}</span>
                        </div>
                        <div v-if="item.takeStatus === 2">
                            <van-button type="primary"
                                size="small"
                                round
                                @click="itemTaken(item)">已取件</van-button>
                            <van-button type="danger"
                                size="small"
                                round
                                @click="showDialog(item)">信息错误</van-button>
                        </div>
                        <van-icon v-if="item.takeStatus === 3"
                            name="success"
                            color="#2ed0df"
                            size="30"></van-icon>
                        <van-icon v-if="item.takeStatus === -3"
                            name="fail"
                            color="#ee0a24"
                            size="30"></van-icon>
                    </div>
                    </van-cell>
                    <van-cell title="备注"
                        readonly
                        :border="false"
                        v-model="orderItem.remark"></van-cell>
                    <van-cell title="订单号"
                        readonly
                        :value="orderItem.number"></van-cell>
                    <van-cell title="联系方式"
                        readonly
                        :value="orderItem.phone"></van-cell>
                    <van-cell title="送达地址"
                        class="color-mark"
                        readonly
                        :value="orderItem.address"></van-cell>
                    <div class="detail-btn-box">
                        <van-button round
                            :disabled="!!type"
                            style="margin-bottom: 5px;"
                            class="cannel takeOrderBtn detailBtn"
                            v-if="orderItem.orderStatus === -2||orderItem.orderStatus === -3"
                            size="small"
                            @click="partPackageInside(orderItem)">部分取件</van-button>
                    </div>
                    <div class="detail-btn-box">
                        <van-button round
                            :disabled="!!type"
                            class="waiting detailBtn takeOrderBtn"
                            @click="takePackageInSide(orderItem)"
                            v-if="orderItem.orderStatus === -2||orderItem.orderStatus === -3"
                            size="small">已取件</van-button>

                        <van-button round
                            :disabled="!type"
                            class="doing detailBtn takeOrderBtn"
                            @click="finishPackageInside(orderItem)"
                            v-else-if="orderItem.orderStatus === 3||orderItem.orderStatus === 6"
                            size="small">已送达</van-button>
                        <van-button round
                            disabled
                            class="taken detailBtn takeOrderBtn"
                            v-else-if="orderItem.orderStatus === 4"
                            size="small">等待确认</van-button>
                        <van-button round
                            disabled
                            class="done detailBtn takeOrderBtn"
                            v-else-if="orderItem.orderStatus === 5"
                            size="small">已完成</van-button>
                    </div>
                    <div class="style-center"
                        v-if="orderItem.orderStatus === 3||orderItem.orderStatus === 6">
                        <van-uploader v-model="image"
                            multiple
                            :max-count="1"
                            :after-read="afterRead"
                            accept="image/*"></van-uploader>
                    </div>
                    <div class="img-cover-box"
                        v-if="(orderItem.orderStatus === 4||orderItem.orderStatus === 5)&&orderItem.imageOver">
                        <img class="imgItem"
                            :src="orderItem?.imageOver">
                    </div>
                </div>

                <!-- 代跑腿 -->
                <div class="popup-main"
                    v-if="orderItem&&(orderItem.orderType === '代跑腿')">
                    <van-cell title="订单类型"
                        readonly
                        :value="orderItem.orderType"></van-cell>
                    <van-cell title="订单号"
                        readonly
                        :value="orderItem.number"></van-cell>
                    <van-cell title="佣金"
                        readonly
                        :value="(+orderItem.amount).toFixed(2)"></van-cell>
                    <van-cell title="联系方式"
                        readonly
                        :value="orderItem.phone"></van-cell>
                    <van-cell title="地址"
                        readonly
                        :value="orderItem.address"></van-cell>
                    <van-cell title="发单时间"
                        readonly
                        :value="orderItem.createTime"></van-cell>
                    <van-cell title="快递件数"
                        class="color-mark"
                        readonly
                        :value="orderItem.count"></van-cell>
                    <van-cell title="任务信息"
                        :border="false"
                        readonly>
                        <template #default>
                            <div>{{ orderItem.packageInfo }}</div>
                        </template>
                    </van-cell>
                    <van-cell class="images-preview">
                        <img class="imgItem"
                            v-for="(item,index) in orderItem.images"
                            :key="index"
                            :src="item">
                    </van-cell>
                    <van-cell title="任务备注"
                        readonly
                        v-model="orderItem.remark"></van-cell>
                    <van-cell title="帮手联系方式"
                        readonly
                        v-model="orderItem.helperPhone"></van-cell>
                    <van-cell title="帮手地址"
                        readonly
                        v-model="orderItem.helperAddress"></van-cell>
                    <van-cell title="接单时间"
                        readonly
                        v-model="orderItem.takeoutTime"></van-cell>
                    <van-cell title="取件时间"
                        readonly
                        v-model="orderItem.takeTime"></van-cell>
                    <van-cell title="送达时间"
                        readonly
                        v-model="orderItem.deliveryTime"></van-cell>
                    <van-cell title="完成时间"
                        readonly
                        v-model="orderItem.finishTime"></van-cell>
                </div>
            </van-popup>
            <van-dialog v-model="isShowDialog"
                title="请选择快递问题"
                show-cancel-button
                @confirm="itemError">
                <van-radio-group v-model="packageError"
                    style="margin: 25px 20px;">
                    <van-radio name="快递件找不到"
                        style="margin: 10px;">快递件找不到</van-radio>
                    <van-radio name="缺少姓名、手机尾号"
                        style="margin: 10px;">缺少姓名、手机尾号</van-radio>
                    <van-radio name="超重订单"
                        style="margin: 10px;">超重订单</van-radio>
                </van-radio-group>
            </van-dialog>
        </div>

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                type: -1, // 帮手类型 0 取件员 1 送件员
                takenOrderListCategory: '所有', // 已接订单列表分类
                path: '所有', // 分类查询地址
                isHide: false, // 是否隐藏晚上单
                isShowFloorCategory: false, // 是否显示楼层分类
                isShowAreaList: false, // 是否展示地址列表
                isShowTakenOrderDetails: false, // 是否显示已接订单详情
                isShowDialog: false, // 是否显示弹窗
                isLoading: false, // 是否下拉刷新加载样式
                orderItem: {}, // 单个订单数据
                takeOrderList: [], // 已接订单列表
                showTakeOrderList: [], // 展示的已接订单列表
                areaList: [], // 地址列表
                image: [], // 图片
                arriveImage: null, // 送达图片
                take: 0, // 已取件数
                notTake: 0, // 未取件数
                delivery: 0, // 待送达数
                deliveried: 0, // 已送达数
                total: 0, // 总件数
                inside1: 0, // 站内1
                inside2: 0, // 站内2
                inside3: 0, // 站内3
                other: 0, // 快递柜-88
                otherOrderCount: 0, // 其它
                difficult: 0, // 疑难单
                error: 0, // 问题单
                all: 0, //所有单
                totalStatusArr: [-25,-24, -23, -22, -21, 2, 21, 22, 23, 24,25, 3, 4, 6], // 所有状态
                allStatusArr: [-2,-25, -24, -23, -22, -21, 2, 21, 22, 23, 24,25, 3, 4, 6], // 所有单状态
                takeStatusArr: [-25,-24, -23, -22, -21, 2, 21, 22, 23, 24,25], // 未取件状态
                oneStatusArr: [21, 22, 23, 24,25], // 单件状态
                subStatusArr: [-25,-24, -23, -22, -21], // 子状态
                packageError: '快递件找不到', // 快递问题
                packageItem: {},
                builds: [],
                floorTotals: {},
                floorEffectives: {},
                detail: [],
                buildsType:-1,
                category:{}
            }
        },
        methods: {
            // 送达上传
            afterRead(file) {
                this.arriveImage = file.file
            },
            // 下拉刷新
            async onRefresh() {
                // 刷新历史订单列表
                await this.refresh()
                setTimeout(() => {
                    // 刷新成功提示
                    this.$toast('刷新成功')
                    // 关闭下拉刷新加载样式
                    this.isLoading = false
                }, 1000)
            },
            async refresh() {
                if (this.path === '所有') {
                    await this.getHistoryOrder()
                } else {
                    const res = await axios({
                        method: 'GET',
                        url: '/user/helper/getpath',
                        params: {
                            path: this.path
                        }
                    })
                    if (this.isHide) {
                        this.takeOrderList = res.data.takeOrderList.filter(item => +(item.expectTime.slice(6, 8)) === 12)
                    } else {
                        this.takeOrderList = res.data.takeOrderList
                    }
                    if (this.type === 1) {
                        this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus)).length
                    } else {
                        this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus) && item.orderCounts.length === 1).length
                    }
                    if (this.type === 0) {
                        this.all = this.takeOrderList.filter(item => this.allStatusArr.includes(item.orderStatus) && (item.orderCounts.length > 1 && item.count > 1 || item.count === 1)).length
                        this.take = this.takeOrderList.filter(item => item.orderStatus === 3 && item.orderCounts.length === 1).length
                    }
                    this.floorTotals = res.data.totals
                    this.floorEffectives = res.data.effectives
                    this.difficult = this.takeOrderList.filter(item => item.orderStatus === -2).length
                    this.notTake = this.takeOrderList.filter(item => this.takeStatusArr.includes(item.orderStatus)).length
                    this.delivery = this.takeOrderList.filter(item => item.orderStatus === 3 || item.orderStatus === 6).length
                    this.deliveried = this.takeOrderList.filter(item => item.orderStatus === 4).length
                    this.inside1 = this.takeOrderList.filter(item => item.orderStatus === 21 || item.orderStatus === -21).length
                    this.inside2 = this.takeOrderList.filter(item => item.orderStatus === 22 || item.orderStatus === -22).length
                    this.inside3 = this.takeOrderList.filter(item => item.orderStatus === 23 || item.orderStatus === -23).length
                    this.other = this.takeOrderList.filter(item => item.orderStatus === 24 || item.orderStatus === -24).length
                    this.otherOrderCount = this.takeOrderList.filter(item => item.orderStatus === 25 || item.orderStatus === -25).length
                    this.error = this.takeOrderList.filter(item => item.orderStatus === -3).length
                    this.category = res.data.category
                }
            },
            // 查看详细订单
            showOutOrderDetails(item) {
                // 显示订单详情弹出层
                this.isShowOutOrderDetails = true
                // 将该订单数据转换为单个响应式数据 准备展示
                this.orderItem = item
                // 将该订单的图片列表转换为数组 准备展示
                this.images = item.images
                // 对未赋值的数据进行预处理
                switch (this.orderItem.orderStatus) {
                    case 0:
                    case 1: {
                        this.orderItem.helperPhone = '未接单'
                        this.orderItem.helperAddress = '未接单'
                        this.orderItem.takeoutTime = '未接单'
                    }
                    case 2: this.orderItem.takeTime = '未取件'
                    case 3: this.orderItem.deliveryTime = '未送达'
                    case 4: this.orderItem.finishTime = '未完成'
                }
                // 对代刷网课业务的数据进行拆分
                if (this.orderItem.orderType === '代刷网课') {
                    const packageInfos = this.orderItem.packageInfo.split(' ')
                    const remarks = this.orderItem.remark.split(' ')
                    this.orderItem.userNumber = packageInfos[0]
                    this.orderItem.password = packageInfos[1]
                    this.orderItem.platform = remarks[0]
                    this.orderItem.course = remarks[1]
                }
            },
            // 获取地址
            async getAddress(value) {
                this.path = value
                // 关闭地址列表弹出层
                this.isShowAreaList = false
                await this.refresh()
            },
            // 查看已接详细订单
            showTakenOrderDetails(item) {
                // 显示订单详情弹出层
                this.isShowTakenOrderDetails = true
                // 将该订单数据转换为单个响应式数据 准备展示
                this.orderItem = item
                // 将该订单的图片列表转换为数组 准备展示
                this.images = item.images
            },
            // 帮手操作 已取件 
            takePackage(item) {
                this.$dialog.confirm({
                    message: '确认已取件',
                }).then(async () => {
                    const res = await axios({
                        method: 'PUT',
                        url: `/user/helper/take/${item.id}`
                    })
                    if (res.code === 1) {
                        this.isShowTakenOrderDetails = false
                        this.orderItem = null
                        // 取件成功提示
                        this.$toast.success('取件成功')
                        // 刷新历史订单列表
                        await this.refresh()
                    } else {
                        this.$toast.fail(res.msg)
                    }
                }).catch(() => {
                })
            },
            async takePackageInSide(item) {
                const res = await axios({
                    method: 'PUT',
                    url: `/user/helper/take/${item.id}`
                })
                if (res.code === 1) {
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    // 取件成功提示
                    this.$toast.success('取件成功')
                    // 刷新历史订单列表
                    await this.refresh()
                } else {
                    this.$toast.fail(res.msg)
                }
            },
            // 帮手操作 部分取件
            async partPackageInside(item) {
                const res = await axios({
                    method: 'PUT',
                    url: `/order/update6/${item.id}`
                })
                if (res.code === 1) {
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    // 添加成功提示
                    this.$toast.success('添加成功')
                    // 刷新历史订单列表
                    await this.refresh()
                } else {
                    this.$toast.fail(res.msg)
                }
            },
            // 帮手操作 添加问题件
            async errorPackageInSide(item) {
                const res = await axios({
                    method: 'PUT',
                    url: `/order/updatef3/${item.id}`
                })
                if (res.code === 1) {
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    // 取件成功提示
                    this.$toast.success('添加成功')
                    // 刷新历史订单列表
                    await this.refresh()
                }
            },
            // 帮手操作 已送达
            finishPackage(item) {
                this.$dialog.confirm({
                    message: '确认已送达',
                }).then(async () => {
                    const formData = new FormData()
                    if (this.arriveImage) {
                        let compressedImage = await imageCompression(this.arriveImage)
                        let conversions = base64ToFile(compressedImage, Date.now())
                        formData.append('image', conversions)
                    }
                    const res = await axios({
                        method: 'PUT',
                        url: `/user/helper/arrive/${item.id}`,
                        data: formData
                    })
                    if (res.code === 1) {
                        this.image = []
                        this.arriveImage = null
                        this.isShowTakenOrderDetails = false
                        this.orderItem = null
                        // 送达成功提示
                        this.$toast.success('送达成功')
                        // 刷新历史订单列表
                        await this.refresh()
                    }
                }).catch(() => {
                })
            },
            // 订单中的已送达
            async finishPackageInside(item) {
                const formData = new FormData()
                if (this.arriveImage) {
                    let compressedImage = await imageCompression(this.arriveImage)
                    let conversions = base64ToFile(compressedImage, Date.now())
                    formData.append('image', conversions)
                }
                const res = await axios({
                    method: 'PUT',
                    url: `/user/helper/arrive/${item.id}`,
                    data: formData
                })
                if (res.code === 1) {
                    this.image = []
                    this.arriveImage = null
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    // 送达成功提示
                    this.$toast.success('送达成功')
                    // 刷新历史订单列表
                    await this.refresh()
                }
            },
            async itemTaken(item) {
                const result = await axios({ method: 'PUT', url: `/order/count/update3/${item.id}` })
                if (result.code === 1) {
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    this.$toast.success('取件成功')
                    await this.refresh()
                }
            },
            showDialog(item) {
                this.packageItem = item
                this.isShowDialog = true
            },
            async itemError() {
                const item = this.packageItem
                const result = await axios({
                    method: 'PUT',
                    url: `/order/count/updatef3/${item.id}`,
                    data: this.packageError
                })
                if (result.code === 1) {
                    this.isShowTakenOrderDetails = false
                    this.orderItem = null
                    this.$toast.success('添加成功')
                    await this.refresh()
                }
            },
            // 获取历史订单
            async getHistoryOrder() {
                const res = await axios({ method: 'GET', url: '/user/helper/getAll' })
                if (res.code === 1) {
                    // 请求成功 刷新历史订单列表
                    if (this.isHide) {
                        this.takeOrderList = res.data.takeOrderList.filter(item => +(item.expectTime.slice(6, 8)) === 12)
                    } else {
                        this.takeOrderList = res.data.takeOrderList
                    }
                    if (this.type === 1) {
                        this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus)).length
                    } else {
                        this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus) && item.orderCounts.length === 1).length
                    }
                    if (this.type === 0) {
                        this.take = this.takeOrderList.filter(item => item.orderStatus === 3 && item.orderCounts.length === 1).length
                        this.all = this.takeOrderList.filter(item => this.allStatusArr.includes(item.orderStatus) && (item.orderCounts.length > 1 && item.count > 1 || item.count === 1)).length
                    }
                    this.difficult = this.takeOrderList.filter(item => item.orderStatus === -2).length
                    this.notTake = this.takeOrderList.filter(item => this.takeStatusArr.includes(item.orderStatus)).length
                    this.delivery = this.takeOrderList.filter(item => item.orderStatus === 3 || item.orderStatus === 6).length
                    this.deliveried = this.takeOrderList.filter(item => item.orderStatus === 4).length
                    this.inside1 = this.takeOrderList.filter(item => item.orderStatus === 21 || item.orderStatus === -21).length
                    this.inside2 = this.takeOrderList.filter(item => item.orderStatus === 22 || item.orderStatus === -22).length
                    this.inside3 = this.takeOrderList.filter(item => item.orderStatus === 23 || item.orderStatus === -23).length
                    this.other = this.takeOrderList.filter(item => item.orderStatus === 24 || item.orderStatus === -24).length
                    this.otherOrderCount = this.takeOrderList.filter(item => item.orderStatus === 25 || item.orderStatus === -25).length
                    this.error = this.takeOrderList.filter(item => item.orderStatus === -3).length
                    this.builds = res.data.builds
                    this.detail = res.data.detail
                    this.buildsType = res.data.buildsType
                    this.category = res.data.category
                }
            },
        },
        async mounted() {
            // 默认获取历史订单列表
            const res = await axios({ method: 'GET', url: '/user/helper/getAll' })
            if (res.code === 1) {
                // 请求成功 刷新历史订单列表
                this.areaList = ['所有', ...res.data.areas]
                this.type = res.data.type
                this.takeOrderList = res.data.takeOrderList
                if (this.type === 1) {
                    this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus)).length
                } else {
                    this.total = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus) && item.orderCounts.length === 1).length
                }
                if (this.type === 0) {
                    this.take = this.takeOrderList.filter(item => item.orderStatus === 3 && item.orderCounts.length === 1).length
                    this.all = this.takeOrderList.filter(item => this.allStatusArr.includes(item.orderStatus) && (item.orderCounts.length > 1 && item.count > 1 || item.count === 1)).length
                }
                this.notTake = this.takeOrderList.filter(item => this.takeStatusArr.includes(item.orderStatus)).length
                this.delivery = this.takeOrderList.filter(item => item.orderStatus === 3 || item.orderStatus === 6).length
                this.deliveried = this.takeOrderList.filter(item => item.orderStatus === 4).length
                this.inside1 = this.takeOrderList.filter(item => item.orderStatus === 21 || item.orderStatus === -21).length
                this.inside2 = this.takeOrderList.filter(item => item.orderStatus === 22 || item.orderStatus === -22).length
                this.inside3 = this.takeOrderList.filter(item => item.orderStatus === 23 || item.orderStatus === -23).length
                this.other = this.takeOrderList.filter(item => item.orderStatus === 24 || item.orderStatus === -24).length
                this.otherOrderCount = this.takeOrderList.filter(item => item.orderStatus === 25 || item.orderStatus === -25).length
                this.difficult = this.takeOrderList.filter(item => item.orderStatus === -2).length
                this.error = this.takeOrderList.filter(item => item.orderStatus === -3).length
                this.showTakeOrderList = this.takeOrderList 
                this.builds = res.data.builds
                this.detail = res.data.detail
                this.buildsType = res.data.buildsType
                this.category = res.data.category
            }
        },
        watch: {
            takenOrderListCategory(newVal) {
                switch (newVal) {
                    case '所有': {
                        if (this.type === 1) {
                            this.showTakeOrderList = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus))
                        } else {
                            this.showTakeOrderList = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus) && item.orderCounts.length === 1)
                        }
                        break
                    }
                    case '未取件': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => this.takeStatusArr.includes(item.orderStatus))
                        break
                    }
                    case '已取件': {
                        if (this.type === 0) {
                            this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 3 && item.orderCounts.length === 1)
                        }
                        break
                    }
                    case '待送达': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 3 || item.orderStatus === 6)
                        break
                    }
                    case '已送达': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 4)
                        break
                    }
                    case '1-7': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 21 || item.orderStatus === -21)
                        break
                    }
                    case '13-41': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 22 || item.orderStatus === -22)
                        break
                    }
                    case '12-38': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 23 || item.orderStatus === -23)
                        break
                    }
                    case '快递柜': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 24 || item.orderStatus === -24)
                        break
                    }
                    case '其它': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 25 || item.orderStatus === -25)
                        break
                    }
                    case '疑难单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === -2)
                        break
                    }
                    case '问题单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === -3)
                        break
                    }
                    case '所有单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => this.allStatusArr.includes(item.orderStatus) && (item.orderCounts.length > 1 && item.count > 1 || item.count === 1))
                        break
                    }
                }
            },
            takeOrderList() {
                switch (this.takenOrderListCategory) {
                    case '所有': {
                        if (this.type === 1) {
                            this.showTakeOrderList = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus))
                        } else {
                            this.showTakeOrderList = this.takeOrderList.filter(item => this.totalStatusArr.includes(item.orderStatus) && item.orderCounts.length === 1)
                        }
                        break
                    }
                    case '未取件': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => this.takeStatusArr.includes(item.orderStatus))
                        break
                    }
                    case '已取件': {
                        if (this.type === 0) {
                            this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 3 && item.orderCounts.length === 1)
                        }
                        break
                    }
                    case '待送达': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 3 || item.orderStatus === 6)
                        break
                    }
                    case '已送达': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 4)
                        break
                    }
                    case '1-7': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 21 || item.orderStatus === -21)
                        break
                    }
                    case '13-41': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 22 || item.orderStatus === -22)
                        break
                    }
                    case '12-38': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 23 || item.orderStatus === -23)
                        break
                    }
                    case '快递柜': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 24 || item.orderStatus === -24)
                        break
                    }
                    case '其它': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === 25 || item.orderStatus === -25)
                        break
                    }
                    case '疑难单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === -2)
                        break
                    }
                    case '问题单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => item.orderStatus === -3)
                        break
                    }
                    case '所有单': {
                        this.showTakeOrderList = this.takeOrderList.filter(item => this.allStatusArr.includes(item.orderStatus) && (item.orderCounts.length > 1 && item.count > 1 || item.count === 1))
                        break
                    }
                }
            },
            isHide() {
                this.refresh()
            }
        }
    })
</script>

</html>